<template>
	<view class="custom-data-picker">
		<view class="pane">
			<view class="block" :class="{ active: modelValue.itemVal===item.value }" v-for="item in localdata" :key="item" @click="onClick(item)">
				<text>{{ item.text }}</text>
			</view>
		</view>
		<view class="date">
			<uni-datetime-picker v-model="datetimerange" @change="handleTimeChange" returnType="string" :border="false" type="daterange" rangeSeparator="">
				<image v-if="iconType === 'classic'" class="calender" :src="calendarIcon"></image>
				<image v-else-if="iconType === 'stylish'" class="calender" :src="calendarBlueIcon"></image>
			</uni-datetime-picker>
		</view>
	</view>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { dateTypeMap } from '@/common/js/maps'
import { dateFormate } from '@/utils/common'
import calendarIcon from '@/static/images/icon_calender.png'
import calendarBlueIcon from '@/static/images/icon_calender-blue.png'

const props = defineProps({
	modelValue: {
		type: Object,
		default: {
			itemVal: 1,
			dateRange: []
		}
	},
	localdata: {
		type: Array,
		default: [
			{ text: '日', value: dateTypeMap.DAY },
			{ text: '周', value: dateTypeMap.WEEK },
			{ text: '月', value: dateTypeMap.MONTH }
		]
	},
	iconType: {
		type: String,
		default: 'classic' // 可选值：classic、stylish
	}
})

const datetimerange = ref([])

watchEffect(() => {
	datetimerange.value = props.modelValue.dateRange
})

const emits = defineEmits(['update:modelValue', 'time-change', 'item-click'])

function getMondayAndSunday() {
    const now = new Date()
    const dayOfWeek = now.getDay()
    const currentDay = now.getDate()
    const currentMonth = now.getMonth()
    const currentYear = now.getFullYear()
	 // 计算周一的日期
    // 如果今天是周日 (dayOfWeek == 0)，则周一是前一周的周一，需要减去 6 天
    // 否则，减去 (dayOfWeek - 1) 天
    const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek
    const monday = new Date(currentYear, currentMonth, currentDay + mondayOffset)
	// 计算周日的日期
    // 如果今天是周日 (dayOfWeek == 0)，则周日就是今天
    // 否则，加上 (7 - dayOfWeek) 天
    const sundayOffset = dayOfWeek === 0 ? 0 : 7 - dayOfWeek
    const sunday = new Date(currentYear, currentMonth, currentDay + sundayOffset)
    return {
        monday: dateFormate(monday, 'date'),
        sunday: dateFormate(sunday, 'date')
    }
}

function getFirstAndLastDayOfMonth() {
    const now = new Date()
    const currentMonth = now.getMonth()
    const currentYear = now.getFullYear()
    // 计算本月的第一天
    const firstDay = new Date(currentYear, currentMonth, 1)
    // 计算本月的最后一天
    // 通过设置日期为下个月的第0天，即本月的最后一天
    const lastDay = new Date(currentYear, currentMonth + 1, 0)
    return {
        firstDay: dateFormate(firstDay, 'date'),
        lastDay: dateFormate(lastDay, 'date')
    }
}

function getFirstAndLastDayOfYear() {
    const now = new Date()
    const currentYear = now.getFullYear()
    // 计算本年的第一天
    const firstDayOfYear = new Date(currentYear, 0, 1)
    // 计算本年的最后一天
    const lastDayOfYear = new Date(currentYear, 11, 31)
    return {
        beginDay: dateFormate(firstDayOfYear, 'date'),
        endDay: dateFormate(lastDayOfYear, 'date')
    }
}

const onClick = (data) => {
	let result = []
	if(data.value === dateTypeMap.DAY) {
		result = [dateFormate(new Date(), 'yyyy-MM-dd')]
	} else if(data.value === dateTypeMap.WEEK) {
		const { monday, sunday } = getMondayAndSunday()
		result = [monday, sunday]
	} else if(data.value === dateTypeMap.MONTH) {
		const { firstDay, lastDay } = getFirstAndLastDayOfMonth()
		result = [firstDay, lastDay]
	} else if(data.value === dateTypeMap.YEAR) {
		const { beginDay, endDay } = getFirstAndLastDayOfYear()
		result = [beginDay, endDay]
	}
	emits('item-click', { ...data, result })
	emits('update:modelValue', { ...props.modelValue, itemVal: data.value })
}

const handleTimeChange = (arr) => {
	emits('time-change', arr)
	emits('update:modelValue', { ...props.modelValue, dateRange: arr })
}
</script>

<style lang="scss">
.custom-data-picker {
	display: flex;
	align-items: center;
	.pane {
		display: flex;
		align-items: center;
		.block {
			margin-right: 16rpx;
			padding: 0 14rpx;
			height: 56rpx;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			background-color: #F6F6F6;
			text {
				font-size: 28rpx;
			}
			&.active {
				background-color: #E5F2FF;
				text {
					color: #0080FF;
				}
			}
		}
	}
	.date {
		height: 40rpx;
		.uni-date {
			.calender {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>